<template>
  <div class="reg_temp">
    <headertop></headertop>
    <div class="reg_form">
      <i class="fa fa-user"></i>
      <x-input placeholder="请输入用户名" v-model="username"></x-input>
      <!-- <span class="tip">请输入用户名</span> -->
    </div>
    <!-- 必须输入123456 -->
    <div class="reg_form">
      <i class="fa fa-key"></i>
      <x-input placeholder="请输入密码" v-model="password"></x-input>
      <!-- <span class="tip">请输入学号</span> -->
    </div>

    <button class="in" @click="reg">注册</button>
    <toast
      v-model="showPositionValue"
      type="text"
      :time="800"
      width="10em"
      is-show-mask
      :text="toastText"
      position="middle"
    ></toast>
  </div>
</template>

<script>
import { Toast } from "vux";
import { XInput } from "vux";
import headertop from "./Header";
export default {
  data() {
    return {
      username: "",
      password: "",
      showPositionValue: false, //是否显示提示
      toastText: "" // 提示文本
    };
  },
  components: {
    XInput,
    headertop,
    Toast
  },
  methods: {
    reg() {
      var username = this.username.trim();
      var password = this.password.trim();
      if (!username || !password) {
        this.showPositionValue = true;
        this.toastText = "用户名或密码为空";
        return;
      }
    }
  }
};
</script>

<style>
.reg_temp .in {
  width: 100%;
  height: 40px;
  font-size: 17px;
  margin-top: 25px;
  background: #00a8ff;
  color: white;
  border: none;
  border-radius: 30px;
}
.tip {
  position: absolute;
  top: 12px;
  right: 0px;
  color: red;
}
.fa {
  font-size: 20px;
  top: 12px;
  left: 10px;
  position: absolute;
  color: black;
}
.reg_form {
  position: relative;
}
.reg_form .weui-cell {
  margin-top: 20px;
  border-bottom: solid 1px black;
}
.reg_temp {
  margin: 0 auto;
  width: 90%;
  margin-top: 5%;
  /* height: 100%; */
}
.weui-input {
  text-indent: 30px;
}
button.weui-btn,
input.weui-btn {
  margin-top: 15px;
  /* border-radius: 40px; */
  margin-left: 10px;
}
button.weui-btn_plain-primary,
button.weui-btn_plain-default {
  border-width: 1px;
  background-color: #00a8ff !important ;
  color: white;
  border: 1px solid #00a8ff;
}
</style>